<script setup>
import {loadComponent} from 'framework'
import {ref, defineAsyncComponent, useSlots,watch,computed,useAttrs} from 'vue'
import {useRoute,useRouter} from 'vue-router'

/**
 * 用法
 * <Subpage>
 *   xxx
 * </>Subpage>
 * <Subpage name="a" src='xx/xx.vue'/>
 *
 * 当页面地址栏对应的hash与name一致的时候，对应的页面显示
 * 如 http://127.0.0.1/#somepage#a a页面显示
 * http://127.0.0.1/#somepage  无name的页面显示
 *
 * const router=useRouter()
 * router.push({hash:'#a'})切换a页面显示
 */


const props=defineProps({
  //匹配route hash
  name:{
    type:String,
    default:''
  },
  //异步组件地址
  src:{
    type:String
  },
  //总是显示
  always:{
    type:Boolean,
    default:false
  }
})
const attrs=useAttrs()
const route=useRoute()
const ContentComponent = defineAsyncComponent(() => loadComponent(props.src))
//判断是否显示
const isShow=computed(()=>{
  if (props.always){
    return true
  }
  if (!props.name&&!route.hash){
    return true
  }
  if ("#"+props.name==route.hash){
    return true
  }
  return false
})
</script>
<template>
  <template v-if="isShow()">
    <slot v-if="!props.src"/>
    <ContentComponent v-else :v-bind="attrs"/>
  </template>
</template>
